<template>
	<div class="member">
		<!-- 版心 -->
		<div class="Library_wrap">
			<!-- 头部 -->
			<div class="header">
				<div class="header_top">
					<el-button size="medium" ><span>收益总额：</span>
						<font>{{'￥'+most[1]}}</font>
					</el-button>
				</div>

				<div class="header_bottom">
					<div class="header_left">
						<div class="header_name">
							收益明细列表
							<span style="display: none;">
							</span>
						</div>

					</div>

					<div class="header_right">
						<!-- <div class="header_number">
							交易种类：
							<el-select v-model="value" placeholder="全部">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div> -->

						<div class="header_number"  style="margin-right: 30px;">
							时间筛选：
							<el-date-picker v-model="startTime" type="date" placeholder="开始时间" @change="TimeScreen" value-format="yyyy-MM-dd">
							</el-date-picker><font>至</font>
							<el-date-picker v-model="endTime" type="date" placeholder="结束时间" @change="TimeScreens" value-format="yyyy-MM-dd">
							</el-date-picker>
						</div>

						<div class="header_number">
							成交总数：
							<span>{{most[2]}}</span>
						</div>

					</div>
				</div>
			</div>

			<!-- 头部结束 -->
			<!-- 表格 -->
			<el-table :data="most[0]" :row-class-name="tableRowClassName" v-loading="loading">
				<el-table-column type="index" label="序号" width="120" :index="indexMethod"></el-table-column>

				<el-table-column prop="draweename" label="用户姓名" width="180"></el-table-column>

				<el-table-column prop="create_time" label="交易日期" :formatter="formatDate"></el-table-column>
				<el-table-column prop="itemname" label="交易类型"></el-table-column>
				<el-table-column prop="itemprice" label="交易价格"></el-table-column>

				<el-table-column prop="refereename" label="推广关系"></el-table-column>
				<el-table-column prop="profitproportion" label="收益比例"></el-table-column>

				<el-table-column prop="realprofit" label="实际收益"></el-table-column>

			</el-table>
			 <div style="float: right;margin-right: 19.7%;">
            <el-pagination
        @current-change='yemian'
        :current-page='yeshu'
        layout="prev, pager, next"
        :total='most[2]'>
        </el-pagination>
        </div>
			
		</div>
		<div class="newBuilt" v-show="addActive">
			<div class="add_owner">
				<div class="add_top">
					<p>新增会员</p>
					<span class="el-icon-circle-close" @click.stop="hide"></span>
				</div>
				<div class="add_bottom">
					<ul>
						<li>
							<span>会员姓名：</span>
							<el-input v-model="input" placeholder="请输入姓名"></el-input>
						</li>
						<li>
							<span>手机号：</span>
							<el-input v-model="input" placeholder="请输入手机号"></el-input>
						</li>
						<li>
							<span>身份：</span>
							<el-select v-model="value" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</li>
						<li>
							<span>注册时间：</span>
							<el-date-picker v-model="value1" type="date" placeholder="选择日期">
							</el-date-picker>
						</li>
						<li>
							<span>失效日期：</span>
							<el-input v-model="input" placeholder=""></el-input>
						</li>
						<li>
							<span>场馆地址：</span>
							<el-input v-model="input" placeholder="请输入场馆地址"></el-input>
						</li>

					</ul>
				</div>
				<div class="add_submit">确认添加</div>
			</div>
		</div>
		<!-- 新增会员结束-->
	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}
	
	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
<script>
	export default {
		data() {
			return {
				tableData: [],

				options: [{
					value: '选项1',
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				yeshu:1,
				value: "",

				input: "",
				loading:true,
				addActive: false,
				loading: false,
				GYM_SESSIONID: '',
				value1: "",
				most: '',
				yeshu: 1,
				zs: '',
				startTime:'',
				endTime:''
			};
		},
		created() {
			this.ajax()
		},
		methods: {
			yemian(yeshu) {
				this.ajax(yeshu)
			},
			ajax(yeshu,startTime,endTime){
				var page=1
				if(yeshu != undefined){
					page=yeshu
				}
				let obj = {
					starTime: startTime,
					endTime:endTime,
					page:page
				}
				let _this = this;
				let qs = require("qs");
				_this.$axios.post("/yujiaextend/gymadmin/findAllUserProfitDetailedByAdmin", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						_this.most = response.data.data
						_this.loading=false
						if(response.data.data[0] ==''){
							 _this.$message({
							message: '暂无数据',
							type: 'warning'
						});    
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			indexMethod(index) {
				return index * 1+1;
			},
			tableRowClassName({
				row,

				rowIndex
			}) {
				if(rowIndex === 1) {
					return "warning-row";
				} else if(rowIndex === 3) {
					return "success-row";
				}

				return "";
			},
			formatDate(row, column) {    
				var  date  =  row[column.property];            
				if (date  ==  undefined)  {               
					return  "";            
				}  
				          
				return  moment(date).format("YYYY-MM-DD");

			},
			newBuilt() {
				this.addActive = true;
			},

			hide() {
				this.addActive = false;
			},
			TimeScreen(){
				if(this.startTime != '' && this.endTime != ''){
					this.ajax('',this.startTime,this.endTime)
				}
			},
			TimeScreens(){
				if(this.startTime != '' && this.endTime != ''){
					this.ajax('',this.startTime,this.endTime)
				}
			},

		}
	};
</script>
<style scoped>
	.member {
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		position: absolute;
		left: 250px;
		top: 0;
		z-index: 2;
	}
	/* 版心 */
	
	.Library_wrap {
		width: 100%;
		height: 100%;
		margin-left: 3%;
	}
	
	.Library_wrap .header {
		width: 100%;
		margin-top: 35px;
	}
	
	.Library_wrap .header .header_top .el-button--medium {
		height: 32px;
		padding: 0 15px;
		background: #2871e9;
	}
	
	.Library_wrap .header .header_top .el-button--medium span {
		font-size: 14px;
	}
	
	.Library_wrap .header .header_top .el-button--medium font {
		font-size: 16px;
		font-weight: bold;
	}
	
	.el-button {
		color: #fff;
	}
	
	.Library_wrap .header .header_bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid #cdcdcd;
	}
	
	.Library_wrap .header .header_bottom .header_left {
		font-size: 16px;
		color: #000000;
		display: flex;
		align-items: center;
	}
	
	.el-date-editor {
		width: 100%;
	}
	
	.el-date-editor {
		line-height: 35px;
	}
	
	.el-select {
		width: 100%;
	}
	
	.Library_wrap .header .header_bottom .header_name {
		font-size: 15px;
		color: #000000;
	}
	
	.Library_wrap .header .header_bottom .header_right {
		display: flex;
		align-items: center;
		padding-right: 22%;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_number {
		font-size: 15px;
		color: #000000;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_number span {
		color: #286fe6;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_number .el-select {
		width: 50%;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_number .el-date-editor {
		width:120px;
	}
	.Library_wrap .header .header_bottom .header_right .header_number font{
		padding: 0 10px;
	}
	/* 版心结束 */
	/* 表格 */
	
	.el-table {
		width: 80%;
		margin-top: 20px;
	}
	
	.el-table tr th {
		text-align: center !important;
	}
	/* 表格结束 */
	/* 添加馆主*/
	
	.newBuilt {
		width: 100%;
		height: 100%;
		position: absolute;
		left: -250px;
		top: 0;
		z-index: 5;
		background: rgba(0, 0, 0, 0.4);
	}
	
	.newBuilt .add_owner {
		width: 560px;
		background: #fff;
		margin: 146px auto;
		border-radius: 6px;
		box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);
		padding: 0 40px;
		padding-bottom: 40px;
	}
	
	.newBuilt .add_owner .add_top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 40px;
	}
	
	.newBuilt .add_owner .add_top p {
		font-size: 20px;
		padding-bottom: 5px;
		border-bottom: 3px solid #286fe6;
		color: #000;
		font-weight: bold;
	}
	
	.newBuilt .add_owner .add_top span {
		font-size: 18px;
		display: inline-block;
	}
	
	.newBuilt .add_owner .add_bottom {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_bottom ul {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_bottom ul li {
		width: 94%;
		display: flex;
		align-items: center;
		margin-top: 35px;
	}
	
	.newBuilt .add_owner .add_bottom ul li span {
		display: inline-block;
		width: 25%;
		font-size: 16px;
		color: #000000;
	}
	
	.newBuilt .add_owner .add_submit {
		width: 52%;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		text-align: center;
		background: #2f7dfe;
		border-radius: 4px;
		margin-top: 80px;
		font-size: 16px;
		color: #fff;
	}
	/* 添加馆主结束 */
</style>